<template>
	<view class="fwcontainer">
		<uni-search-bar @confirm="bindConfirm" @cancel="bindCancel" placeholder="请输入车牌号/车主" maxlength="20" cancelButton="auto"
		 clearButton="auto" />
		<scroll-view class="uni-padding-wrap euni-margin20-top enui-bgcolor-white">
			<view class="uni-flex uni-column list-item" v-for="(item,index) in dataPageList">
				<view class="uni-flex uni-row">
					<text class="text euni-flex-autowidth euni-txt-left">车牌号：{{item.car_sn}}</text>
					<text class="text euni-flex-autowidth euni-txt-left">车主：{{item.car_owner}}</text>
					<view class="text euni-txt-right">
						<button class="mini-btn" @click="bindItemSelect" :data-index="index" type="primary" size="mini">选择</button>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>


<script>
	const APP = getApp();

	export default {
		components: {

		},
		data() {
			return {
				//设置数据
				dataKeywords: '',
				isSearched: false,
				//分页数据
				dataPageList: [],
				dataPageNum: 0,
			}
		},
		methods: {
			bindItemSelect(e) {
				let _this = this;
				let dataset = e.currentTarget.dataset;
				let listItem = this.dataPageList[dataset.index];
				console.log(listItem);
				
				APP.apptool.navigateBackPage(1, function (targetPage) {
					targetPage.dataInfo.carId = listItem.id;
					targetPage.dataInfo.carText = listItem.car_sn;
				});
			},
			bindConfirm(e) {
				let keywords = e.value.trim();
				if (keywords.length > 0) {
					this.isSearched = true;
					this.dataKeywords = keywords;
					this.dataPageList = [];
					this.dataPageNum = 0;
					this.loadPageList(function() {
						uni.stopPullDownRefresh();
					});
				}
			},
			bindCancel(e) {
				if (this.isSearched) {
					this.isSearched = false;
					this.dataKeywords = '';
					this.dataPageList = [];
					this.dataPageNum = 0;
					this.loadPageList(function() {
						uni.stopPullDownRefresh();
					});
				}
			},
			loadPageData: function() {
				let _this = this;
				_this.loadPageList(null);
			},
			loadPageList: function(completedcallback) {
				let _this = this;
				APP._post('/api/car/index', {
					page_index: _this.dataPageNum + 1,
					car_sn: _this.dataKeywords
				}, null, function(res) {
					//执行成功
					if (res.code === APP.appconfig.fwcode.successed) {
						if (res.data.list.length > 0) {
							_this.dataPageNum = res.data.index;
							_this.dataPageList = _this.dataPageList.concat(res.data.list);
						} else {
							_this.dataPageNum = -1;
						}
					} else {
						APP.apptool.showToastInfo(res.msg);
					}
				}, function(res) {
					//执行失败
				}, function(res) {
					//执行完成
					completedcallback && completedcallback();
				});
			},
			refreshPage: function(){
				this.dataPageList = [];
				this.dataPageNum = 0;
				this.loadPageList(function() {
					uni.stopPullDownRefresh();
				});
			}
		},
		//生命周期
		onLoad(options) {
			this.loadPageData();
		},
		onShow() {

		},
		onReady() {

		},
		onPullDownRefresh() {			
			this.refreshPage();			
		},
		onReachBottom() {
			let _this = this;

			if (this.dataPageNum !== -1) {
				// 显示加载图标
				uni.showLoading({
					title: '加载中...',
				})
				this.loadPageList(function() {
					uni.hideLoading();
				});
			} else {
				APP.apptool.showToastInfo('已经是最后一页了');
			}
		},
		onHide() {

		},
		onUnload() {

		},
		onBackPress(options) {

		},
		onPageScroll(e) {

		},
	}
</script>


<style>
	.list-item {
		display: -webkit-flex;
		display: flex;
		flex-direction: column;
		margin: 20rpx 0px;
		border-top: 3px dotted #0062CC;
		padding-top: 20rpx;
	}

	.list-item .header {
		width: 750rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.list-item .remark {
		width: 750rpx;
	}

	.list-item .title {
		flex: 1;
		color: #000;
		font-size: 28rpx;
		/* 设置行高后，会显示已隐藏的内容 */
		/* line-height: 28rpx;  */
	}
	.uni-padding-wrap{
		margin-bottom: 80rpx;
	}
</style>
